<template>
    {{ anme }}
    <el-row :gutter="20">
        <el-col :span="3"
            ><div class="grid-content ep-bg-purple" />
            <img src="../../public/favicon.ico" alt=""
        /></el-col>
        <el-col class="col1" :span="17"
            ><div class="grid-content ep-bg-purple" />
            小王的vue后台管理系统</el-col
        >
        <el-col :span="4"
            ><div class="grid-content ep-bg-purple" />
            <el-dropdown>
                <d class="el-dropdown-link">
                    <el-icon><UserFilled /></el-icon>
                    {{ name.data.data.adminname }}
                    <el-icon class="el-icon--right">
                        <arrow-down />
                    </el-icon>
                </d>
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item>菜单一</el-dropdown-item>
                        <el-dropdown-item>菜单二</el-dropdown-item>
                        <el-dropdown-item>菜单三</el-dropdown-item>
                        <el-dropdown-item divided>退出系统</el-dropdown-item>
                    </el-dropdown-menu>
                </template>
            </el-dropdown></el-col
        >
    </el-row>
</template>
<script>
export default {
    props: ["name"],
    data() {
        return {};
    },
    created() {
        //console.log("1", this.name.data.data.adminname);
    },
};
</script>
<style lang="css" scoped>
.el-row {
    align-items: center;
    vertical-align: middle;
    /* text-align: center; */
    /* line-height: 20%; */
    /* padding-top: 1%; */
    line-height: 70px;
}

.col1 {
    color: white;
}
.userinfo {
    text-align: right;
    /* width: 10px; */
    /* position: absolute;
    top: 50%; */
}
.el-icon {
    position: relative;
    top: 25%;
    /* font-size: 16px; */
}
.el-dropdown-link {
    color: white;
    border: none;
    margin-top: 20px;
}
.el-dropdown-link:focus {
    outline: none;
}
</style>
